<template>
  <div class="course-item">
    <div class="course-item-title" @click="foldCourse">
      <div class="course-item-step">{{ examObj.totalNum }}课时</div>
      <div :class="isFirst ? 'course-item-main_f' : 'course-item-main'">
        <div class="course-item-name">{{ examObj.stageName }}</div>
        <img :class="fold ? 'course-item-more_rotate' : 'course-item-more'"
          src="../../assets/images/default-icon-more.png" alt="雪松课堂">
      </div>
    </div>
    <div v-show="fold" class="course-item-list">
      <div :class="index ? 'course-item-list-item' : 'course-item-list-item_f'" v-for="(item, index) in examObj.lists"
        :key="item.courseStageId">
        <div class="course-list-item-title">
          <p class="item-title-name">{{ item.name }}</p>
        </div>
        <div class="course-list-item-study">
          <div class="course-list-item-study-is">
            <p v-if="item.questionStatus != 2" class="study-is-ex" @click="doQuestions(item.name, item.sectionId)">专项练习
            </p>
            <p class="study-is-video" @click="watchVideo(item.videoId)">观看视频</p>
          </div>
          <p :class="item.isFinish ? '' : 'status_none'" class="course-list-item-study-status">{{ item.isFinish ? '已学完'
            :
            '未完成'}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseItem',
  props: {
    examObj: Object,
    isFirst: Boolean
  },
  data() {
    return {
      fold: false // 是否折叠课程
    }
  },
  methods: {
    // 折叠课程
    foldCourse() {
      this.fold = !this.fold
    },

    // 历年真题
    doQuestions(name, sectionId) {
      const routeUrl = this.$router.resolve({
        name: 'Questions',
        params: {
          name,
          sectionId
        }
      })
      window.open(routeUrl.href, '_blank')
    },

    // 观看视频
    watchVideo(videoId) {
      const routeUrl = this.$router.resolve({
        name: 'Video', // 路由名称
        params: { videoId } // 路由参数
      }).href

      // 使用 window.open 在新标签页中打开构建的 URL
      window.open(routeUrl, '_blank')
      // this.$router.push({
      //   name: 'Video',
      //   params: {
      //     videoId
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.course-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.course-item-title {
  display: flex;
  width: 100%;
  height: 76px;
  cursor: pointer;
  user-select: none;
}

.course-item-step {
  font-size: 12px;
  font-weight: 400;
  line-height: 76px;
  color: #999999;
}

.course-item-main {
  flex: 1;
  display: flex;
  height: 76px;
  border-top: 1px solid #EEEEEE;
  box-sizing: border-box;
  margin-left: 30px;
}

.course-item-main_f {
  flex: 1;
  display: flex;
  height: 76px;
  box-sizing: border-box;
  margin-left: 30px;
}

.course-item-name {
  flex: 1;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 76px;
  color: #333333;
}

.course-item-more {
  align-self: center;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  cursor: pointer;
}

.course-item-more_rotate {
  align-self: center;
  width: 16px;
  height: 16px;
  transform: rotate(0deg);
  cursor: pointer;
}

/* 展开内容 */
.course-item-list {
  align-self: flex-end;
  width: 723px;
  background-color: #FCFCFC;
  padding: 0 30px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 30px;
}

.course-item-list-item {
  width: 644px;
  height: 108px;
  padding: 30px 0;
  box-sizing: border-box;
  border-top: 1px solid #EEEEEE;
  margin-left: 19px;
}

.course-item-list-item_f {
  width: 644px;
  height: 108px;
  padding: 30px 0;
  box-sizing: border-box;
  margin-left: 19px;
}

.course-list-item-title {
  position: relative;
}

.course-list-item-title::before {
  position: absolute;
  left: -20px;
  content: "";
  width: 14px;
  height: 14px;
  background: url(../../assets/images/default-icon_display.png) no-repeat;
  background-size: 285px 20px;
  background-position: 0 -3px;
}

.item-title-name {
  height: 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
}

.course-list-item-study {
  display: flex;
  margin-top: 20px;
}

.course-list-item-study-is {
  flex: 1;
  display: flex;
}

.course-list-item-study-is p {
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #666666;
  margin-left: 20px;
  cursor: pointer;
}

.course-list-item-study-is p {
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #666666;
  margin-left: 20px;
  cursor: pointer;
}

.course-list-item-study-is p:nth-child(n+2) {
  margin-left: 60px;
}

.study-is-ex {
  position: relative;
}

.study-is-ex:hover {
  color: #17B47B;
}

.study-is-ex::before {
  position: absolute;
  top: -1px;
  left: -19px;
  content: "";
  width: 14px;
  height: 14px;
  background: url(../../assets/images/default-icon-function.png) no-repeat;
  background-size: 117px 16px;
  background-position: -62px;
}

.study-is-video {
  position: relative;
}

.study-is-video:hover {
  color: #17B47B;
}

.study-is-video::before {
  position: absolute;
  top: -1px;
  left: -19px;
  content: "";
  width: 14px;
  height: 14px;
  background: url(../../assets/images/default-icon-function.png) no-repeat;
  background-size: 117px 16px;
  background-position: -82px;
}

.course-list-item-study-status {
  width: 36px;
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #17B47B;
}

.status_none {
  color: #999999;
}
</style>
